<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit"/>
    <title>图片选择</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/static/admin/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/admin/css/ionicons.min.css">
    {:load_res('css','20180302',['/static/admin/css/bootstrap.min.css','/static/admin/css/AdminLTE.min.css','/static/admin/css/skins/skin-blue.min.css','/static/admin/plugins/pace/pace.min.css','https://cdn.staticfile.org/ladda-bootstrap/0.9.4/ladda-themeless.min.css'])}
    {:load_res('css','20180302',['/static/admin/css/gdbase.css'])}
    <style>
        .box-item{height:509px;}
        .we7-flex {
            display: flex;
            display: -webkit-flex;
        }
        .img-container .item {
            position: relative;
        }
        .img-container .item {
            position: relative;
        }
        .img-container .mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(0, 0, 0, .5);
            text-align: center;
            display: none;
        }
        .img-container .active .mask {
            display:block;
        }
        .img-container .mask .wi{
            color: #fff;
            font-size: 32px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        .img-container {
            padding: 10px 10px 41px;
            flex-wrap: wrap;
            margin-left: 0;
            max-height: 460px;
            overflow-y: auto;
        }
        .img-container .item {
            flex: none;
            position: relative;
            width: calc(20% - 20px);
            margin: 10px;
            text-align: center;
            vertical-align: middle;
            background-color: #eee;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .img-container .item:before {
            content: "";
            display: inline-block;
            padding-bottom: 100%;
            width: .1px;
            vertical-align: middle;
        }
        .img-container .item .name {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            line-height: 34px;
            background: rgba(0,0,0,.5);
            color: #fff;
            padding: 0 5px;
            text-align: left;
            z-index: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .img-container .del {
            position: absolute;
            width: 34px;
            line-height: 34px;
            text-align: center;
            background-color: #428bca;
            cursor: pointer;
            bottom: 0;
            right: 0;
            z-index: 6;
            display: none;
        }
        .img-container .item:hover {
            outline:2px solid #428bca
        }
        .img-container .item:hover .del {
            display: block;
        }
        .img-container .del .wi {
            color: #fff;
        }
    </style>
</head>
<body class="skin-blue sidebar-mini fixed">

<div class="">
    <ul class="nav nav-tabs">
        <li role="presentation" {if(1==$type)}class="active"{/if}><a href="{:url('',['type'=> 1 ,'cb' => $callBackName , 'fieldname' => $fieldName])}">上传图片</a></li>
        <li role="presentation" {if(2==$type)}class="active"{/if}><a href="{:url('',['type'=> 2 ,'cb' => $callBackName , 'fieldname' => $fieldName])}">选择图片</a></li>
    </ul>
    <div class="boxs">
        {if(1==$type)}
        <div class="box-item">
            <div class="img-container we7-flex">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">上传图片</label>
                        <div class="col-sm-10" id="image_select_box_select_photo">
                            <input id="image_select_select_photo" type="file" multiple>
                            <input type="hidden" class="image_select_hidden" name="select_photo" id="h_select_photo" text="上传图片">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        {if(2==$type)}
        <div class="box-item">
            <div class="row" style="margin-top:15px;">
                <div class="col-xs-12">
                    <div class="img-container we7-flex">
                        {volist name="photos" id="v"}
                        <div class="item" onclick="$(this).toggleClass('active')" style="background-image: url({$base_url . $v['dir'] . $v['title']});">
                            <div class="name">{$v['filename']|default=$v['title']}</div>
                            <div class="mask">
                                <span class="wi glyphicon glyphicon-ok"></span>
                            </div>
                            <div class="del" del-key="{$v['title']}">
                                <span class="wi glyphicon glyphicon-remove"></span>
                            </div>
                            <input type="hidden" value="{$base_url . $v['dir'] . $v['title']}">
                        </div>
                        {/volist}
                    </div>
                </div>
                <div class="col-xs-12" style="padding-top:15px;">
                    <div id="page1" class="pull-right"></div>
                </div>
            </div>
        </div>
        {/if}
    </div>
    {if(2==$type)}
    <div class="col-xs-12">
        <div class="col-xs-5">

        </div>
        <div class="col-xs-6">
            <a href="javascript:confirmSelectPhoto();" class="btn btn-info">确定</a>
            <a href="javascript:closeSelectPhoto();" class="btn btn-default">取消</a>
        </div>
    </div>
    {/if}
</div>

{:load_res('js','20180303',[
'https://cdn.staticfile.org/headjs/1.0.3/head.load.min.js',
'/static/js/jquery/jquery.min.js',
'/static/admin/js/bootstrap.min.js',
'/static/admin/plugins/pace/pace.min.js',
'/static/admin/js/jquery.slimscroll.min.js',
'/static/js/fastclick.js',
'/static/admin/js/adminlte.min.js',
'/static/js/jquery.form.min.js',
'/static/jquery-loading-overlay/1.5.4/loadingoverlay.min.js',
'https://cdn.staticfile.org/ladda-bootstrap/0.9.4/spin.min.js',
'https://cdn.staticfile.org/ladda-bootstrap/0.9.4/ladda.min.js'
])}
<script src="/static/laypage/laypage.js"></script>
{:load_res('js','20180303',['/static/admin/js/gdbase.js'])}
<script>
    gdbase.site = {
        'version': "{:config('site.build')}",
        'static_path': "{:config('site.static_path')}",
        'assets_path': "{:config('site.assets_path')}"
    };
    gdbase.api.uploadUrl = "{:url('Upload/upload')}";
    gdbase.api.uploadCheckFilemd5Url = "{:url('Upload/check_file_md5')}";
    gdbase.api.umEditorConfigUrl = "{:url('Index/get_umeditor_config')}";
    window.UMEDITOR_HOME_URL = gdbase.site.static_path + '/umeditor/1.2.3/';
</script>
<!-- page script -->
{if(2==$type)}
<script>
    var totalPages = {$totalPages};
    var pageIndex = {$pageIndex};
    laypage({
        cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
        pages: totalPages, //通过后台拿到的总页数
        curr: pageIndex, //当前页
        skip: true, //是否开启跳页
        jump: function(obj, first){ //触发分页后的回调
            if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                location.href = "{$pageUrl|raw}" +  "&p=" + obj.curr
            }
        }
    });
</script>
{/if}
{if(1==$type)}
<script>
    var fn_image_select_select_photo = function () {
        if(!window['gdbase']){
            console.log('等待加载...');
            setTimeout(fn_image_select_select_photo,500);
            return;
        }
        gdbase.initFileInput("#image_select_select_photo","#h_select_photo",false,function (data, previewId, index) {
            console.log(data);
            $('#image_select_box_select_photo .file-preview-thumbnails > .file-preview-frame .progress > .progress-bar-success:eq('+index+')').attr('data-url',data['data']['url'])
        })
    }
    fn_image_select_select_photo();
</script>
{/if}
<script>
    $(function () {
        $('.img-container .item .del').on('click',function (e) {
            if(confirm('删除不可恢复确认删除吗？')){
                $.getJSON("{:url('Upload/upload',['source'=>'file_delete'])}",{'key':$(this).attr('del-key')}, function(json){
                    if(!json['error']){
                        // 删除成功
                        location.reload();
                    }
                });
            }
            return false;
        })
    })
    function confirmSelectPhoto() {
        var urls = [];
        $('.img-container div.item.active input:hidden').each(function (i, input) {
            urls.push($(this).val());
        });
        $('#image_select_box_select_photo [data-url]').each(function (i, input) {
            urls.push($(this).attr('data-url'));
        });
        if(!top.{$callBackName}){
            alert('未定义图片选择回调');
            return;
        }
        top.{$callBackName}("{$fieldName}",urls);
        closeSelectPhoto();
    }
    function closeSelectPhoto() {
        top.layer.closeAll();
    }
</script>
</body>
</html>
